<template>
	<div>
		<div class="circle">
			<div class="circle_header">
				<span class="circle_header_str">圈子</span>
				<i class="circle_header_down" @click="unfolded"></i>
				<router-link :to="{ path :'/circle/hair' }">
					<i class="circle_header_normal"></i>
				</router-link>
			</div>
			
			<div class="circle_header_unfolded">
				<div class="warp">
					<div class="unfolded_all">
						<span>全部</span>
					</div>
					<div class="unfolded_popular">
						热门
					</div>
					<div class="unfolded_attention">
						关注
					</div>
				</div>
			</div>
			
		</div>
		
		
		<Cirle_content></Cirle_content>
		
		<Circle_footer></Circle_footer>
	</div>
</template>

<script>
	
	import $ from 'jquery';
	// 引入中间的内容组件
	import Cirle_content from './circle_content';
	// 引入底部的内容组件
	import Circle_footer from './circle_footer';
	
	var index = 0;
	export default {
		
		name:'circle_header',
		
		data(){
			
			return {
				
				
				
			}
			
		},
		methods:{
			unfolded:function(event){
				index++;
				if(index % 2 == 0){
					$(event.target).css({"background":"url(../../../static/images/23/circle_to_down_arrow.png) center center no-repeat"})
					$('.circle_header_unfolded').slideUp(100);
				}else{
					$(event.target).css({background:"url(../../../static/images/23/circle_to_up_arrow.png) center center no-repeat"})
					$('.circle_header_unfolded').slideDown(100);
				}
				
			}
		},
		components:{
			Cirle_content,
			Circle_footer
		}
		
	}
</script>
<style lang="less" scoped>
table{ border-collapse: collapse; border-spacing: 0; }
body,p,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6 { margin: 0; }
input,textarea,select { padding: 0; border: 1px solid #ccc;outline: 0; font-size: 100%; }
i{ font-style: normal; }
b{ font-weight: normal; }
input{ text-indent: 2em; }
ul,ol{ padding-left: 0; list-style: none; }
a{ text-decoration: none; }
a,img{ -webkit-user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.clearfix:after { content: ""; display: block; height: 0; overflow: hidden; clear: both; }
body{ font-family: "微软雅黑"; font-size:16px; }

.circle_header_unfolded{
    display: none;
    position: absolute;
    width:100%;
    height:100/64rem;
    line-height:100/64rem;
    background: url(../../../static/images/24/circle_float_bar_bg.png);
    .warp{
        width:520/64rem;
        margin:0 auto;
        .unfolded_all{
            margin-left:(520 - 140 * 3) / 3 /64rem;
            float: left;
            width:140/64rem;
            height:100%;
            background: url(../../../static/images/24/circle_float_bar_btn_selected.png) no-repeat center;
            background-size: 100%;
            text-align: center;
            font-size:30/64rem;
            color:#fff;
        }
        .unfolded_popular,.unfolded_attention{
            margin-left:(520 - 140 * 3) / 3 /64rem;
            float:left;
            width:140/64rem;
            height:100%;
            background-size: 100%;
            text-align: center;
            font-size:30/64rem;
            color:#721cb1;
        }
    }
}

.circle{
    position:relative;
    background: #A54BE8;
    .circle_header{
        width:600/64rem;
        margin:0 auto;
        height:90/64rem;
        text-align:center;
        line-height:90/64rem;
        position:relative;
        .circle_header_str{
            font-size:32/64rem;
            color:#fff;
        }
        .circle_header_down{
            display:inline-block;
            position: absolute;
            margin-left:16/64rem;
            background: url("../../../static/images/23/circle_to_down_arrow.png") center center no-repeat;
            background-size:100%;
            width:28/64rem;
            height:100%;
        }
        .circle_header_normal{
            display:inline-block;
            position: absolute;
            right:0;
            background: url("../../../static/images/23/circle_edit_icon_normal.png") center center no-repeat;
            background-size: 100%;
            width:32/64rem;
            height:100%;
        }
    }
}
</style>